<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-02-22 11:38:10
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-06-01 14:42:09
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread" @click="zxChi" :class="active == 1 ? 'active' : ''">
        <p>回款</p>
      </div>
      <div
        class="bread"
        style="margin-left: 20px"
        @click="tcChi"
        :class="active == 2 ? 'active' : ''"
      >
        <p>回款计划</p>
      </div>
      <div class="search">
        <el-input
          v-model="input"
          placeholder="请输入客户/合同名称"
          clearable
        ></el-input>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
      </div>
      <div class="btn" v-if="chioose">
        <el-button type="primary" size="default" @click="newXshk">
          新建回款
        </el-button>
        <!-- <el-dropdown style="margin-left: 10px">
          <el-button class="el-icon-more"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="importClue">
              导入
            </el-dropdown-item>
            <el-dropdown-item @click.native="getExl"> 导出 </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
      <div class="btn" v-else>
        <el-button type="primary" size="default" @click="newPlan">
          新建回款计划
        </el-button>
        <el-button type="primary" size="default" @click="newBatch">
          批量新建
        </el-button>
        <!-- <el-dropdown style="margin-left: 10px">
          <el-button class="el-icon-more"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="importClue">
              导入
            </el-dropdown-item>
            <el-dropdown-item @click.native="getExl"> 导出 </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </div>
    <div class="chooise" v-if="selShow">
      <div class="left">
        <span>场景：</span>
        <el-select
          v-model="value"
          ref="sel"
          clearable
          @visible-change="(v) => visibleChange(v, 'sel', selClick, admClick)"
          class="sel-sence"
          @change="querySceneList"
        >
          <el-option
            v-for="item in sceneOptions"
            :key="item.sceneId"
            :label="item.name"
            :value="item.sceneId"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          icon="iconfont icon-shaixuan"
          size="default"
          @click="screen"
        >
          高级筛选
        </el-button>
      </div>
    </div>
    <div class="sel" v-else>
      <span> 已选中 {{ multipleSelection.length }} 项</span>
      <el-button
        type="primary"
        size="default"
        plain
        :disabled="editDisabled"
        @click="editPlan"
      >
        编辑
      </el-button>
      <el-button
        type="primary"
        size="default"
        plain
        :disabled="chargeDisabled"
        @click="changeCharge"
      >
        更换负责人
      </el-button>
      <el-button
        type="primary"
        plain
        size="default"
        @click="addTeam"
        v-if="crmType == 9"
      >
        添加团队成员
      </el-button>
      <el-button type="primary" size="default" plain @click="exportSelect">
        导出选中
      </el-button>
      <el-button
        type="danger"
        size="default"
        plain
        @click="del"
        :disabled="disabled"
      >
        删除
      </el-button>
    </div>
    <div v-if="scenArr !== []" class="scenF">
      <div v-for="(item, index) in scenArr" :key="index" class="scenF-content">
        <div class="scenF-detail" @click="scenSearch(item.sceneId)">
          {{ item.sceneList }}
          <i
            class="el-icon-circle-close"
            @click.stop="scenDel(index)"
            style="margin-left: 10px"
          ></i>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :height="tableHight"
        v-if="chioose"
      >
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column type="selection" width="55"> </el-table-column>
        <template v-for="(item, index) in switchShow">
          <el-table-column
            :key="index"
            :label="item.label"
            v-if="showD(item, index)"
            :prop="item.stage"
            :width="item.width"
            fixed
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-button type="text" class="batch" @click="drawer(scope.row)">
                {{ scope.row.code }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.stage"
            :width="item.width"
            v-show="item.value"
            v-if="item.label == '回款方式'"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.type | payType }}
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.stage"
            :width="item.width"
            v-show="item.value"
            v-if="item.label == '审核状态'"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span style="color: #00d41c" v-if="scope.row.status == 3">
                {{ scope.row.status | status }}
              </span>
              <span style="color: #e90202" v-else-if="scope.row.status == 4">
                {{ scope.row.status | status }}
              </span>
              <span style="color: #f7b500" v-else-if="scope.row.status == 5">
                {{ scope.row.status | status }}
              </span>
              <span style="color: #999999" v-else-if="scope.row.status == 6">
                {{ scope.row.status | status }}
              </span>
              <span style="color: #2b2b2b" v-else>
                {{ scope.row.status | status }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.stage"
            :width="item.width"
            v-show="item.value"
            v-if="
              item.label !== '回款编号' &&
              item.label !== '回款方式' &&
              item.label !== '审核状态' &&
              item.value
            "
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </template>
        <el-table-column fixed="right">
          <template slot="header">
            <i class="iconfont icon-shujupeizhi" @click.stop="tableShow"> </i>
          </template>
        </el-table-column>
      </el-table>
      <div v-else>
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :height="tableHight"
        >
          <template slot="empty" class="emptyBg">
            <img src="@/assets/images/empty.jpg" alt="" />
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <template v-for="(item, index) in switchShow">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.stage"
              :width="item.width"
              v-show="item.value"
              v-if="
                item.label !== '期数' &&
                item.label !== '回款状态' &&
                item.label !== '回款方式' &&
                item.value
              "
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              :key="index"
              :label="item.label"
              v-if="showH(item, index)"
              :prop="item.stage"
              :width="item.width"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <el-button type="text" class="batch" @click="drawer(scope.row)">
                  {{ scope.row.issue }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.stage"
              :width="item.width"
              v-show="item.value"
              v-if="item.label == '回款方式'"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{ scope.row.type | payType }}
              </template>
            </el-table-column>
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.stage"
              :width="item.width"
              v-show="item.value"
              v-if="item.label == '回款状态'"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{ scope.row.status | payStatus }}
              </template>
            </el-table-column>
          </template>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="default"
                @click="addPayment(scope.row)"
                :disabled="!scope.row.enable"
              >
                新建回款
              </el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right">
            <template slot="header">
              <i class="iconfont icon-shujupeizhi" @click.stop="tableShow"> </i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="wuhu">
        <table-sh
          :dialog="dialog"
          :switchShow.sync="switchShow"
          v-if="dialog.dialogTableVisible"
          @submit="getSwitchList"
        ></table-sh>
      </div>
    </div>
    <div class="footer">
      <div class="footer-price" v-if="chioose">
        <span>回款金额(元)：&nbsp;{{ XshkPrice.amount }}</span>
      </div>
      <div class="footer-price" v-else>
        <span>计划回款总金额(元)：&nbsp;{{ XshkPrice.planAmount }}</span>
        <span style="margin: 0 10px">
          已回款金额(元)：&nbsp;{{ XshkPrice.actualAmount }}
        </span>
        <span>未回款金额(元)：&nbsp;{{ XshkPrice.unrecoveryAmount }}</span>
      </div>

      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 更换负责人 -->
    <el-dialog
      title="更换负责人"
      :visible.sync="dialog.dialogPerCha"
      width="50%"
      @close="perClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <charge-person
        v-if="dialog.dialogPerChaEject"
        ref="chaPer"
      ></charge-person>
      <span slot="footer">
        <el-button @click="dialog.dialogPerCha = false"> 取消 </el-button>
        <el-button type="primary" @click="onChangeChar"> 确定 </el-button>
      </span>
    </el-dialog>
    <manage-screen
      :dialog="dialog"
      :switchShow="switchShow"
      v-if="dialog.screenEcejt"
      :type="type"
      @sceneArr="sceneArr"
    ></manage-screen>
    <drag-table
      :dialog="dialog"
      :type="type"
      v-if="dialog.senceAdminEject"
      ref="dragTable"
    ></drag-table>
    <drawer
      :dialog="dialog"
      :drawerData="drawerData"
      :crmType="crmType"
      :columnId="type"
      v-if="dialog.dialogShowDrawerEject"
    ></drawer>
    <new-xshk
      ref="Xshk"
      :dialog="dialog"
      :payDisabled="payDisabled"
      v-if="dialog.XshkDialogEject"
    ></new-xshk>
    <new-plan
      ref="plan"
      :dialog="dialog"
      v-if="dialog.newPlanShowEject"
    ></new-plan>
    <new-batch :dialog="dialog" v-if="dialog.newBatchShowEject"></new-batch>
    <join-team
      :dialog="dialog"
      v-if="dialog.joinTeamShowEject"
      :drawerData="drawerData"
      :type="type"
      :entities="entities"
    ></join-team>
    <transfer
      :dialog="dialog"
      :drawerData="drawerData"
      :type="type"
      v-if="dialog.transferShowEject"
    ></transfer>
  </div>
</template>

<script>
import {
  planList,
  planExportByIds,
  planDelete,
  xshkDelete,
  getList,
  auditProcess,
  changePlanDirector,
  changeDirector,
  exportByIds,
  planFooter,
  xshkFooter,
} from "@/api/CRM/xshk";
import ManageScreen from "./components/manageScreen.vue";
import DragTable from "./components/dragTable.vue";
import { queryScene } from "@/api/currency";
import Drawer from "./components/drawer.vue";
import NewXshk from "./components/newXshk.vue";
import newPlan from "./components/newPlan.vue";
import NewBatch from "./components/newBatch.vue";
import { distriBution } from "@/api/registration";
import tableSh from "@/components/tableSh/index.vue";
// 负责人
import chargePerson from "@/components/chargePerson";
import joinTeam from "@/components/joinTeam/index.vue";
import Transfer from "@/components/joinTeam/transfer.vue";
import { rw, isDelete } from "@/api/team";
export default {
  components: {
    ManageScreen,
    DragTable,
    Drawer,
    NewXshk,
    newPlan,
    NewBatch,
    tableSh,
    chargePerson,
    joinTeam,
    Transfer,
  },
  filters: {
    payType: function (val) {
      if (val == 1) {
        val = "微信支付";
      } else if (val == 2) {
        val = "支付宝支付";
      } else if (val == 3) {
        val = "网银支付";
      } else if (val == 4) {
        val = "其他";
      }
      return val;
    },
    status: function (val) {
      if (val == 1) {
        val = "正常";
      } else if (val == 2) {
        val = "撤回";
      } else if (val == 3) {
        val = "通过";
      } else if (val == 4) {
        val = "拒绝";
      } else if (val == 5) {
        val = "审核中";
      } else if (val == 6) {
        val = "作废";
      }
      return val;
    },
    payStatus: function (val) {
      if (val == 1) {
        val = "待回款";
      } else if (val == 2) {
        val = "回款完成";
      }
      return val;
    },
  },
  data() {
    return {
      entities: [],
      tableHight: window.innerHeight - 330,
      XshkPrice: {},
      payDisabled: false,
      charge: "",
      chargeId: "",
      crmType: 9,
      chargerOptions: [],
      ids: [],
      disabled: false,
      editDisabled: false,
      chargeDisabled: false,
      selShow: true,
      type: 72,
      active: 1,
      chioose: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      input: "",
      value: "",
      tableData: [],
      scenArr: [],
      sceneOptions: [],
      multipleSelection: [],
      switchShow: [
        {
          value: true,
          label: "回款编号",
          stage: "code",
        },
        {
          value: true,
          label: "客户名称",
          stage: "customer",
        },
        {
          value: true,
          label: "合同名称",
          stage: "contract",
        },
        {
          value: true,
          label: "回款计划期数",
          stage: "issue",
        },
        {
          value: true,
          label: "回款日期",
          stage: "date",
        },
        {
          value: true,
          label: "回款金额",
          stage: "amount",
        },
        {
          value: true,
          label: "回款方式",
          stage: "type",
        },
        {
          value: true,
          label: "备注",
          stage: "remark",
        },
        {
          value: true,
          label: "审核状态",
          stage: "status",
        },
        {
          value: true,
          label: "合同金额",
          stage: "contractAmount",
        },
        {
          value: true,
          label: "负责人",
          stage: "directorName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
        },
      ],
      drawerData: {},
      dialog: {
        examineShow: false,
        contractShow: false,
        contractShowEject: false,
        customerShow: false,
        customerShowEject: false,
        newBatchShow: false,
        newBatchShowEject: false,
        newPlanShow: false,
        newPlanShowEject: false,
        XshkDialog: false,
        XshkDialogEject: false,
        dialogShowDrawerEject: false,
        dialogShowDrawer: false,
        activity: true,
        setShow: false,
        screenEcejt: false,
        dialogTableVisible: false,
        dialogScreenVisible: false,
        dialogPerCha: false,
        dialogPerChaEject: false,
        dialogEnter: false,
        senceAdmin: false, //场景管理
        senceAdminEject: false,
        distributionShow: false,
        distributionShowEject: false,
        joinTeamShowEject: false,
        joinTeamShow: false,
        editTeamShowEject: false,
        editTeamShow: false,
        transferShow: false,
        transferShowEject: false,
      },
    };
  },

  created() {
    this.getList();
    this.getScene();
    this.getXshkPrice();
  },
  mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    // 新增团队
    addTeam() {
      this.dialog.joinTeamShowEject = true;
      this.$nextTick(() => {
        this.dialog.joinTeamShow = true;
      });
    },
    // 获取回款价格
    getXshkPrice() {
      xshkFooter().then((res) => {
        this.XshkPrice = res;
      });
    },
    // 获取回款计划价格
    getPlanPrice() {
      planFooter().then((res) => {
        this.XshkPrice = res;
      });
    },
    // 点击空白
    bodyCloseMenus(e) {
      let self = this;
      if (self.dialog.dialogTableVisible == true) {
        self.dialog.dialogTableVisible = false;
      }
    },
    // 关闭更换负责人
    perClose() {
      this.charge = "";
      this.dialog.dialogPerChaEject = false;
    },
    // 确定更换
    onChangeChar() {
      if (this.charge == "") return this.$message.error("请选择负责人");
      if (this.crmType == 8) {
        changePlanDirector({
          id: this.drawerData.id,
          userId: this.charge,
        }).then((res) => {
          this.$message.success(res.msg);
          this.dialog.dialogPerCha = false;
          this.getList();
        });
      } else {
        changeDirector({
          id: this.drawerData.id,
          userId: this.charge,
        }).then((res) => {
          this.$message.success(res.msg);
          this.dialog.dialogPerCha = false;
          this.getList();
        });
      }
    },
    //获取负责人
    getChargeList() {
      distriBution().then((res) => {
        this.chargerOptions = res.data;
      });
    },
    // 编辑
    editPlan() {
      rw({
        module: this.type,
        entity: this.drawerData.id,
        userId: this.drawerData.userId,
      }).then((res) => {
        if (res.data == true) {
          if (this.crmType == 8) {
            this.dialog.newPlanShowEject = true;
            this.$nextTick(function () {
              this.$refs["plan"].planForm = this.drawerData;
              this.dialog.newPlanShow = true;
            });
          } else if (this.crmType == 9) {
            this.dialog.XshkDialogEject = true;
            this.drawerData.auditUserIds = [];
            this.$nextTick(function () {
              this.$refs["Xshk"].planForm = this.drawerData;
              auditProcess({
                id: this.drawerData.id,
                customerId: this.drawerData.customerId,
                contractId: this.drawerData.contractId,
              }).then((res) => {
                this.$refs["Xshk"].xshkList = res.data;
                res.data.forEach((item) => {
                  this.$refs["Xshk"].planForm.auditUserIds = [];
                  this.$refs["Xshk"].planForm.auditUserIds.push(item.userId);
                });
              });
              this.dialog.XshkDialog = true;
            });
          }
        } else {
          this.$message.info("无编辑权限");
        }
      });
    },
    // 回款计划新建回款
    addPayment(row) {
      this.dialog.XshkDialogEject = true;
      this.payDisabled = true;
      this.$nextTick(function () {
        this.dialog.XshkDialog = true;
        this.$refs["Xshk"].planForm.customer = row.customer;
        this.$refs["Xshk"].planForm.customerId = row.customerId;
        this.$refs["Xshk"].planForm.contract = row.contract;
        this.$refs["Xshk"].planForm.contractId = row.contractId;
        this.$refs["Xshk"].planForm.date = row.date;
        this.$refs["Xshk"].planForm.amount = row.planAmount;
        this.$refs["Xshk"].planForm.type = row.type;
        this.$refs["Xshk"].getIssues();
        this.$refs["Xshk"].planForm.issue = row.issue;
        console.log(row.amount);
      });
    },
    // 新建批量新建
    newBatch() {
      this.dialog.newBatchShowEject = true;
      this.$nextTick(function () {
        this.dialog.newBatchShow = true;
      });
    },
    // 新建回款计划
    newPlan() {
      this.dialog.newPlanShowEject = true;
      this.$nextTick(function () {
        this.dialog.newPlanShow = true;
      });
    },
    // 更换负责人
    changeCharge() {
      if (this.active == 1) {
        this.dialog.transferShowEject = true;
        this.$nextTick(function () {
          this.dialog.transferShow = true;
        });
      } else if (this.active == 2) {
        this.dialog.dialogPerChaEject = true;
        this.$nextTick(() => {
          this.dialog.dialogPerCha = true;
        });
      }
    },
    // 导出选中
    exportSelect() {
      if (this.crmType == 8) {
        planExportByIds(this.ids).then((res) => {
          this.download(res.msg);
        });
      } else {
        exportByIds(this.ids).then((res) => {
          this.download(res.msg);
        });
      }
    },
    // 删除
    async del() {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该回款, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        if (this.crmType == 8) {
          planDelete({ id: this.chargeId }).then((res) => {
            this.$message.success("删除成功！");
            this.getPlanList();
          });
        } else if (this.crmType == 9) {
          let userIds = [];
          this.multipleSelection.forEach((item) => {
            userIds.push(item.userId);
          });
          isDelete(userIds).then((res) => {
            if (res.data == true) {
              xshkDelete({ id: this.chargeId }).then((res) => {
                this.$message.success("删除成功！");
                this.getList();
              });
            } else {
              this.$message.error("请联系负责人进行删除！");
            }
          });
        }
      }
    },
    // 新建回款
    newXshk() {
      this.dialog.XshkDialogEject = true;
      this.$nextTick(function () {
        this.dialog.XshkDialog = true;
      });
    },
    //查看
    drawer(row) {
      this.dialog.dialogShowDrawerEject = true;
      this.drawerData = row;
      this.$nextTick(function () {
        this.dialog.dialogShowDrawer = true;
      });
    },
    // 回款
    zxChi() {
      this.selShow = true;
      this.multipleSelection = [];
      this.ids = [];
      this.type = 72;
      this.crmType = 9;
      this.scenArr = [];
      this.chioose = true;
      this.active = 1;
      this.pageNum = 1;
      this.value = "";
      this.input = "";
      this.tableData = [];
      this.switchShow = [
        {
          value: true,
          label: "回款编号",
          stage: "code",
        },
        {
          value: true,
          label: "客户名称",
          stage: "customer",
        },
        {
          value: true,
          label: "合同名称",
          stage: "contract",
        },
        {
          value: true,
          label: "回款计划期数",
          stage: "issue",
        },
        {
          value: true,
          label: "回款日期",
          stage: "date",
        },
        {
          value: true,
          label: "回款金额",
          stage: "amount",
        },
        {
          value: true,
          label: "回款方式",
          stage: "type",
        },
        {
          value: true,
          label: "备注",
          stage: "remark",
        },
        {
          value: true,
          label: "审核状态",
          stage: "status",
        },
        {
          value: true,
          label: "合同金额",
          stage: "contractAmount",
        },
        {
          value: true,
          label: "负责人",
          stage: "directorName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
        },
      ];
      this.getList();
      this.getScene();
      this.getXshkPrice();
    },
    //回款计划
    tcChi() {
      this.selShow = true;
      this.multipleSelection = [];
      this.ids = [];
      this.type = 71;
      this.crmType = 8;
      this.scenArr = [];
      this.chioose = false;
      this.active = 2;
      this.value = "";
      this.input = "";
      this.pageNum = 1;
      this.tableData = [];
      this.switchShow = [
        {
          value: true,
          label: "客户名称",
          stage: "customer",
        },
        {
          value: true,
          label: "合同编号",
          stage: "contractCode",
        },
        {
          value: true,
          label: "期数",
          stage: "issue",
        },
        {
          value: true,
          label: "计划回款金额",
          stage: "planAmount",
          width: "120",
        },
        {
          value: true,
          label: "计划回款日期",
          stage: "date",
          width: "120",
        },
        {
          value: true,
          label: "提前几天提醒",
          stage: "remind",
          width: "120",
        },
        {
          value: true,
          label: "回款方式",
          stage: "type",
        },
        {
          value: true,
          label: "备注",
          stage: "remark",
        },
        {
          value: true,
          label: "实际回款金额",
          stage: "actualAmount",
          width: "120",
        },
        {
          value: true,
          label: "实际回款时间",
          stage: "actualDate",
          width: "120",
        },
        {
          value: true,
          label: "未回款金额",
          stage: "unrecoveryAmount",
        },
        {
          value: true,
          label: "回款状态",
          stage: "status",
        },
        {
          value: true,
          label: "负责人",
          stage: "directorName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
        },
      ];
      this.getScene();
      this.getPlanList();
      this.getPlanPrice();
    },
    // 获取回款列表
    getList(val) {
      getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 获取回款计划列表
    getPlanList(val) {
      // 获取回款计划
      console.log(1);
      planList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 新建资质
    newQua() {
      this.dialog.newQuaShow = true;
    },
    // 请求场景
    getScene() {
      queryScene({
        type: this.type,
      }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.sceneOptions = res.scenes;
        } else {
          this.sceneOptions = res.scenes;
        }
      });
    },
    // 打开高级筛选
    screen() {
      this.dialog.screenEcejt = true;
      this.$nextTick(function () {
        this.dialog.dialogScreenVisible = true;
      });
    },
    // 点击临时搜索
    scenSearch(id) {
      if (this.type == 72) {
        this.getList(id);
      } else if (this.type == 71) {
        this.getPlanList(id);
      }
    },
    // 删除临时搜索
    scenDel(i) {
      this.scenArr.splice(i, 1);
      if (this.scenArr.length == 0) {
        if (this.type == 72) {
          this.getList();
        } else if (this.type == 71) {
          this.getPlanList();
        }
      }
    },
    // 获取数组
    sceneArr(data) {
      this.scenArr.push(data);
    },
    querySceneList() {
      if (this.type == 72) {
        this.getList(this.value);
      } else if (this.type == 71) {
        this.getPlanList(this.value);
      }
    },
    //管理
    admClick() {
      this.dialog.senceAdminEject = true;
      this.$nextTick(function () {
        this.dialog.senceAdmin = true;
      });
    },
    //新建场景
    selClick() {
      this.screen();
    },
    // 场景下拉框按钮
    visibleChange(visible, refName, onClick, onClick2) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>新建场景</span>
                            </li>
                        `;
          const el2 = document.createElement("ul");
          el2.className = "el-cascader-menu__list";
          el2.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>管理</span>
                            </li>
                        `;
          popper.appendChild(el);
          popper.appendChild(el2);
          el2.onclick = () => {
            onClick2 && onClick2();
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      if (this.type == 72) {
        this.getList();
      } else if (this.type == 71) {
        this.getPlanList();
      }
    },
    // 分页器
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.type == 72) {
        this.getList();
      } else if (this.type == 71) {
        this.getPlanList();
      }
    },
    search() {
      if (this.type == 72) {
        this.pageNum = 1;
        this.getList();
      } else if (this.type == 71) {
        this.pageNum = 1;
        this.getPlanList();
      }
    },
    // 控制列表排序
    tableShow() {
      if (this.dialog.dialogTableVisible == false) {
        this.dialog.dialogTableVisible = true;
      } else {
        this.dialog.dialogTableVisible = false;
      }
    },
    getSwitchList(list) {
      this.$set(this, "switchShow", list);
    },
    // 表格前多选器
    handleSelectionChange(val) {
      this.entities = [];
      this.selShow = false;
      this.multipleSelection = val;
      if (val.length !== 0) {
        this.chargeId = val[0].id;
        this.drawerData = val[0];
        let arr = [];
        val.forEach((item) => {
          arr.push(item.id);
          this.entities.push(item.id);
        });
        this.ids = arr;
        if (val[0].status == 3 || val[0].status == 5 || val.length > 1) {
          this.editDisabled = true;
        } else {
          this.editDisabled = false;
        }
        if (val[0].status == 3 || val[0].status == 5 || val.length > 1) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
        if (val[0].status == 6 || val.length > 1) {
          this.chargeDisabled = true;
        } else {
          this.chargeDisabled = false;
        }
      }

      if (val.length == 0) {
        this.selShow = true;
      }
    },
    // 判断是否drawer
    showH(item, index) {
      let bole = false;
      if (item.label === "期数") {
        bole = true;
      }
      if (!item.value) bole = false;
      return bole;
    },
    showD(item, index) {
      let bole = false;
      if (item.label === "回款编号") {
        bole = true;
      }
      if (!item.value) bole = false;
      return bole;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ececec;
  .bread {
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-left: 5px;
    padding: 0 10px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    height: 74px;
    img {
      height: 100%;
    }
    i {
      font-size: 30px;
    }
    p {
      text-align: center;
      //   margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      //   color: #2b2b2b;
    }
  }
  .search {
    display: flex;
    height: 34px;
    margin: auto;
  }
}
.chooise {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .sel-sence {
    margin-right: 20px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.sel {
  margin-top: 20px;
  span {
    margin-right: 40px;
  }
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
.active {
  color: #1267fa !important;
  height: 74px;
  border-bottom: 2px solid #1267fa;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table {
  position: relative;
  .wuhu {
    position: absolute;
    top: 45px;
    right: 0px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ececec;
  }
}
</style>